<template>
    <div>
        <Spin fix  v-if="!spinShow">
            <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
            <div>数据拼命加载中...</div>
        </Spin>
        <div class="rand-num-wrap">请选择随机模拟面试题数量：<input type="tel" class="rand-num" v-model="iRandNum" />&nbsp;&nbsp;<button type="button" class="rand-btn" @click="randChangeData()">随机抽题</button><span class="iv-username">{{username}}实训二答辩进行中...</span></div>
        <div class="interview-main">
            <div v-if="ivData.length>0">
                <div class="iv-list-wrap" v-for="(item,index) in this.ivData">
                    <div name="iv-list" ref="iv-list" :class='{"iv-list":true,"green":index%2!=0?true:false,"blue":index%2==0?true:false}'>{{index+1}}、{{item.title}}</div>
                    <div :class='{"iv-attr":true,"green":index%2!=0?true:false,"blue":index%2==0?true:false}'>
                        <div>
                            <div class="attr-list">
                                状态：<label v-for="(value,index) in statusArr" :key="index"><input type="checkbox" :ref="'state-attr-'+item.id" :name="'state-attr-'+item.id" class="iv-attrs" :value="value" /> {{value}}&nbsp;&nbsp;</label>
                            </div>
                            <div class="attr-list">
                                表达：<label v-for="(value,index) in talkArr" :key="index"><input type="checkbox" :ref="'express-attr-'+item.id" :name="'express-attr-'+item.id" class="iv-attrs" :value="value" /> {{value}}&nbsp;&nbsp;</label>
                            </div>
                            <div class="attr-list">
                                技术：<label v-for="(value,index) in skillArr" :key="index"><input type="checkbox" :ref="'tech-attr-'+item.id" :name="'tech-attr-'+item.id" class="iv-attrs" :value="value" /> {{value}}&nbsp;&nbsp;</label>
                            </div>
                            <div class="btn-wrap">
                                <button type="button" @click="saveData($event,''+item.id+'')" class="attr-btn" ref="evalBtn">评价</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="noData" v-else>
                请选择数量点击提交
            </div>
        </div>
    </div>
</template>

<script>
  import API from '../../api/api_interview';
  import toast from '../main-components/toast/toast.js';
export default {
    name: 'interview',
    data () {
        return {
            ivData:[],
            username:'',
            statusArr:[" 状态饱满", "积极阳光", "自信十足", "爱笑", "萎靡不振","紧张"],
            talkArr:["条理清楚", "逻辑清晰", "一针见血", "重点突出", "答非所问", "逻辑混乱", "支支吾吾", "随机应变", "一知半解"],
            skillArr:[ "熟练", "掌握","了解", "面面俱到", "驾轻就熟", "狗屁不会" ,"马马虎虎","拓展良好","拓展弱"],
            iRandNum:10,
              params:{
                searchKeyword:'',
                page: 1,
                size: 1000//每页10条
              },
            spinShow:false
        };
    },
    methods: {
        randChangeData(){
            API.findList(this.params).then((res)=>{
                this.spinShow=true;
                this.aSrcData = res.data;
                this.changeData();
            })
        },
      changeData(){
          clearTimeout(this.timeout);
          setTimeout(()=> {
              if (this.$refs.evalBtn.length>0){
                  for (let i=0;i<this.$refs.evalBtn.length;i++){
                      this.$refs.evalBtn[i].className='attr-btn';
                      this.$refs.evalBtn[i].innerHTML="评价";
                  }
              }
              var oIvattr=document.querySelectorAll(".iv-attrs");
              if (oIvattr.length>0){
                  for (let i=0;i<oIvattr.length;i++){
                      oIvattr[i].checked =false;
                  }
              }
          },30);
        if(this.iRandNum<1){
          alert('数量必须1');
          return;
        }
        if(this.iRandNum>this.aSrcData.length){
          alert('输入的数量大于题目总数');
          return;
        }
        this.aTmpSrcData=[];
        for(let i=0;i<this.iRandNum;i++){
            let iRand=parseInt(Math.random()*(this.aSrcData.length-1-0+1)+0);
          this.aTmpSrcData[i]=this.aSrcData[iRand];
        }
          //this.aTmpSrcData=[{"id":26,"title":"有几种方法可以改变this指向"},{"id":59,"title":"前端安全问题"},{"id":61,"title":"jquery添加插件"},{"id":37,"title":"webpack按需加载"},{"id":14,"title":"伪类和伪元素的区别"},{"id":31,"title":"vue的优势为什么使用vue"},{"id":48,"title":"用css如何实现左侧宽度固定，右侧宽度自适应"},{"id":21,"title":"懒加载原理？"},{"id":21,"title":"懒加载原理？"},{"id":23,"title":"公司的测试是怎么向你提bug的？他是怎么记录的？"}]
        this.ivData=this.aTmpSrcData;
          //console.log(JSON.stringify(this.aTmpSrcData));
          //解决点击多次动画不能停下来的bug
          for(var i=0;i<this.aTmpSrcData.length;i++){
              clearInterval(this.times[i]);
          }
        let aTmpSrcDataLength=this.aTmpSrcData.length;
        for(let i=0;i<aTmpSrcDataLength;i++){
            this.times[i]=setInterval(()=>{
              let iRand=parseInt(Math.random()*(aTmpSrcDataLength-1-0+1)+0);
              this.$refs['iv-list'][i].innerHTML=(i+1)+"、"+this.aTmpSrcData[iRand].title;
              this.aTmpData[i]={id:this.aTmpSrcData[iRand].id,title:this.aTmpSrcData[iRand].title}
            },100);
        }

          this.timeout=setTimeout(()=>{
            for(let i=0;i<this.aTmpSrcData.length;i++){
                clearInterval(this.times[i]);
            }
            let aData=[];
          //去除数组aTmpData重复的值
          for(let i=0;i<this.aTmpSrcData.length;i++){
              //console.log(this.oData[this.aTmpData[i].id]);
            if(!this.oData[this.aTmpSrcData[i].id]){
                this.oData[this.aTmpSrcData[i].id]=true;
                aData.push(this.aTmpSrcData[i]);
            }
          }


          //两个数组比较去重复值
          for(let i=0;i<this.aSrcData.length;i++){
                if (aData.length==this.iRandNum){
                    break;
                }
                if(!this.oData[this.aSrcData[i].id]){
                    aData.push(this.aSrcData[i]);
                }
          }
//              console.log("aTmpSrcData="+JSON.stringify(this.aTmpSrcData));
//              console.log("aData="+JSON.stringify(aData));
                this.ivData=aData;
                for(let i=0;i<aData.length;i++){
                    this.$refs['iv-list'][i].innerHTML=(i+1)+"、"+aData[i].title;
                }
        },3000)

      },
        saveData(event,iId){
          if(event.target.className =='attr-btn disabled'){
              return;
          }
          if (this.$refs['express-attr-'+iId].length>0){
              let aExpress=[];
              let sExpress='';
              let aTech=[];
              let sTech='';
              let aState=[];
              let sState='';
              for (let i=0;i<this.$refs['express-attr-'+iId].length;i++){
                  if (this.$refs['express-attr-'+iId][i].checked ){
                      aExpress.push(this.$refs['express-attr-'+iId][i].value);
                  }
              }
              sExpress=aExpress.join(",");

              for (let i=0;i<this.$refs['tech-attr-'+iId].length;i++){
                  if (this.$refs['tech-attr-'+iId][i].checked ){
                      aTech.push(this.$refs['tech-attr-'+iId][i].value);
                  }
              }
              sTech=aTech.join(",");

              for (let i=0;i<this.$refs['state-attr-'+iId].length;i++){
                  if (this.$refs['state-attr-'+iId][i].checked ){
                      aState.push(this.$refs['state-attr-'+iId][i].value);
                  }
              }
              sState=aState.join(",");

              var jData={uid:this.iUid,ivid:iId,express:sExpress,tech:sTech,state:sState};
              if (this.iUid!=undefined && iId!=undefined && iId!='' && sTech!='' && sExpress!='' && sState!=''){
                  API.addEvaluate(jData).then((res)=>{
                      toast({
                          message : "评价成功"
                      });
                      event.target.className='attr-btn disabled';
                      event.target.innerHTML='已评价';
                  })
              }else{
                  toast({
                      message : "请勾选评价选项"
                  });
              }

          }

        }
    },
    created(){
        this.timeout;
    },
    mounted () {
        this.times=[];
        this.aTmpData=[];
        this.oData={};
        this.aSrcData=[];
        this.aTmpSrcData=[];
        this.iUid=this.$route.query.uid;
        this.username=this.$route.query.username;
        API.findList(this.params).then((res)=>{
            this.spinShow=true;
            this.aSrcData = res.data;
            this.changeData();
        })
    },
    activated(){
        this.times=[];
        this.aTmpData=[];
        this.oData={};
        this.aSrcData=[];
        this.aTmpSrcData=[];
        this.iUid=this.$route.query.uid;
        this.username=this.$route.query.username;
        API.findList(this.params).then((res)=>{
            this.spinShow=true;
            this.aSrcData = res.data;
            this.changeData();
        })
    }
};
</script>

<style scoped>
    .iv-username{
        color:#fff;
        font-size:18px;
        background:#2d8cf0;
        margin-left: 20px;
        padding:5px 10px;
        border-radius: 5px;
    }
    .rand-num-wrap{margin-left:1%;}
    .rand-num{width:50px;height:25px;border-radius: 3px;border:1px solid #CCCCCC;text-align: center;}
    .rand-btn{width:80px;height:25px;background: #19be6b;border:0 none;border-radius: 3px;color:#FFFFFF;cursor: pointer;}
    .interview-main{width:98%;height:auto;border:1px solid #CCCCCC;border-radius: 3px;margin:0 auto;margin-top:10px;overflow:hidden;padding-bottom: 10px;}
    .interview-main .iv-list-wrap{width:90%;overflow:hidden;margin:0 auto;margin-top:10px;}
    .interview-main .iv-list{width:100%;height:40px;margin:0 auto;color:#FFFFFF;line-height:40px;border-top-left-radius: 3px;border-top-right-radius: 3px;overflow:hidden;padding-left:10px;padding-right:10px;font-size:14px;font-weight: bold;cursor: pointer}
    .interview-main .iv-list.blue{background:#2d8cf0;}
    .interview-main .iv-list.green{background:#19be6b;}
    .noData{text-align:center;margin-top:10px;}
    .interview-main .iv-attr{width:100%;height:auto;padding-bottom: 10px;overflow:hidden;padding-left:10px;}
    .interview-main .iv-attr.blue{border-bottom-left-radius: 3px;border:1px solid #2d8cf0}
    .interview-main .iv-attr.green{border-bottom-left-radius: 3px;border:1px solid #19be6b}
    .interview-main .attr-list{margin-top:10px;}
    .interview-main .btn-wrap{width:96%;text-align: right;}
    .interview-main .attr-btn{border:0 none;width:80px;height:25px;background: #FBAF3C;color:#FFFFFF;border-radius: 3px;cursor:pointer;}
    .interview-main .attr-btn.disabled{background:#CCCCCC;}
</style>
<style>
    .main .single-page-con{background: #FFFFFF;}
</style>
